<template>
    <Card title="今日用户数" value="888,888,8">
      <div ref="barChartRef" style="width: 100%; height: 100%"></div>
  
      <template #footer>
        <div>退货率<span class="emphasis">5.91%</span></div>
      </template>
    </Card>
  </template>
  
  <script lang="ts">
  import Card from "./Card.vue";
  import axios from "axios";
  export default {
    name: "TodayOrder",
    components: {
      Card,
    },
  };
  </script>
  
  <script lang="ts" setup>
  import * as echarts from "echarts";
  import type { EChartsType } from "echarts";
  import { ref, onMounted } from "vue";
  //定义页面中的标签对象 柱状图
  const barChartRef = ref();
  let barChart: EChartsType;
  //准备配置项 根据配置内容生成图形结构
  const getOption = () => {
    return {
      //位置
      grid: {
        // left: 0,
        // right: 0,
        top: 0,
        bottom: 0,
      },
      xAxis: {
        boundaryGap: false, //x轴两侧不留白
        // show:false, 是否显示水平值
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ], // x轴数据列表
      },
      yAxis:{
          show:false,//垂直线
      },
  
      series:[{
          name: '实时订单数',
          //图像形式bar柱状图
          type: 'bar',
          // data: orderTrend.value,
          data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
          
          
          areaStyle: {
            color: 'red'
          },
          lineStyle: {
            opacity: 0
          }
      }],
      //显示提示
      tooltip:{
          trigger:'axis',
          confine:true
      }
    };
  };
  onMounted(()=>{
      barChart = echarts.init(barChartRef.value);
      barChart.setOption(getOption());
  })
  </script>
  <style scoped>
  
  </style>
  